<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
      <h1>{{msg}}</h1>
      <h1>{{obj.name}}</h1>
      <button @click="change">改变</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    // watch和computed 的区别
    // computed是计算属性 是用来计算处理data和vuex的数据的 他必须有返回值，计算属性有自己的依赖缓存，只有数据发生变化才会从新计算，计算属性内不能发起请求

    // watch 监听器 监听数据的变化，可以获取到数据的新的值和旧的值，watch内部可以进行异步操作


    new Vue({
      el:"#app",
      data(){
        return {
           msg:"你好",
           obj:{
            name:"王德发"
           }
        }
      },
      methods: {
        change(){
          this.msg="hello"
          this.obj.name="李连杰"
        }
      },
      computed:{
      },
       // 侦听器或者又叫监视 监视data对象中的数据，当数据变化便可以做一些运算
      watch:{
        msg(newVal,oldVal){
            // newVal 是监听到数据新的值
            // oldVal 是数据旧的值
          console.log("新的值：",newVal)
          console.log("旧的值：",oldVal)

        },
        obj:{ //监听对象 写成对象的模式
            handler(newVal){ //handler深度监听函数
              // 监听对象 没有旧的值
              console.log("新的对象值：",newVal)
            },
            deep:true, //watch开启深度监听的属性
            immediate:true//进入页面开始监听
        }
      }
    })
  </script>
</body>
</html>